<template>
    <div class="container">
        <div class="header">
            <p class="title">vue 可视化大屏</p>
            <p class="time">当前时间：{{ time }}</p>
        </div>
        <div class="body">
            <div class="col">
                <div class="panel">
                    <p class="panel-title">柱状图-就业行业</p>
                    <div class="chart" ref="chart1"></div>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel">
                    <p class="panel-title">柱状图-就业行业</p>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel">
                    <p class="panel-title">柱状图-就业行业</p>
                    <div class="panel-footer"></div>
                </div>
            </div>
            <div class="col">
                <div class="number">
                    <div class="number-top">
                        <p class="req-num">627327</p>
                        <p class="real-num">1027327</p>
                    </div>
                    <div class="number-bottom">
                        <p class="req-num">需求人数</p>
                        <p class="real-num">供给人数</p>
                    </div>
                </div>
                <div class="map">
                    <div class="map-chart"></div>
                    <div class="map-bg1"></div>
                    <div class="map-bg2"></div>
                    <div class="map-bg3"></div>
                </div>
            </div>
            <div class="col">
                <div class="panel">
                    <p class="panel-title">柱状图-就业行业</p>
                    <div class="chart" ref="chart2"></div>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel">
                    <p class="panel-title">柱状图-就业行业</p>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel">
                    <p class="panel-title">柱状图-就业行业</p>
                    <div class="panel-footer"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from '@vue/runtime-core'
import useCurrentTime from '@hooks/useCurrentTime'
import * as echarts from 'echarts'
import { 
    chart1Option,
    chart2Option,
    chart3Option,
    chart4Option,
 } from '../data/options'

export default defineComponent({
    setup() {
        const time = ref(useCurrentTime())

        const timer = setInterval(() => {
            time.value = useCurrentTime()
        }, 1000)

        onUnmounted(() => {
            clearInterval(timer)
        })

        const chart1 = ref(null)
        const chart2 = ref(null)

        onMounted(() => {
            const myChart1 = echarts.init(chart1.value)
            myChart1.setOption(chart1Option)

            const myChart2 = echarts.init(chart2.value)
            myChart2.setOption(chart2Option)
            
        })

        return {
            time,
            chart1,
            chart2
        }
    },
})
</script>

<style scoped>
@font-face {
    font-family: electronicFont;
    src: url(@/assets/font/DS-DIGIT.TTF);
}
.container {
    /* width: 100vw; */
    min-height: 100vh;
    background-image: url('@src/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
.header {
    height: 100px;
    line-height: 80px;
    background-image: url('@src/head_bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.title {
    color: #fff;
    font-size: 38px;
    text-align: center;
}
.time {
    position: absolute;
    top: 0;
    right: 30px;
    line-height: 75px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

.body {
    display: flex;
    padding: 10px;
    color: #fff;
}
.col {
    flex: 3;
}
.col:nth-child(2) {
    flex: 5;
    margin: 0 10px 15px;
}
.panel {
    height: 310px;
    background-image: url(@src/panel_bg.png);
    background-size: cover;
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
    padding: 0 15px 40px;
    margin-bottom: 15px;
    box-sizing: border-box;
    text-align: center;
}
.panel::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
    left: 0;
    top: 0;
}
.panel::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
    right: 0;
    top: 0;
}
.panel-footer::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
    left: 0;
    bottom: 0;
}
.panel-footer::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
    right: 0;
    bottom: 0;
}
.panel-title {
    height: 48px;
    line-height: 48px;
    font-size: 20px;
    font-weight: 400;
}
.chart {
    height: 240px;
}

.number {
    background-color: rgba(101, 132, 226, 0.1);
    padding: 15px;
}
.number-top {
    display: flex;
    height: 80px;
    align-items: center;
    font-size: 70px;
    color: #ffeb7b;
    font-family: 'electronicFont';
    border: 1px solid rgba(25, 186, 139, 0.17);
    position: relative;
}
.number-top::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
    top: 0;
    left: 0;
}
.number-top::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
    bottom: 0;
    right: 0;
}
.number-top p {
    flex: 1;
    text-align: center;
    position: relative;
}
.number-top p:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 0;
    height: 50%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}
.number-bottom p {
    display: inline-block;
    width: 50%;
    line-height: 40px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    padding-top: 10px;
    text-align: center;
}

.map {
    height: 810px;
    position: relative;
}
.map-chart {
}
.map-bg1 {
    width: 518px;
    height: 518px;
    background-image: url('@src/map.png');
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
}
.map-bg2 {
    width: 613px;
    height: 613px;
    position: absolute;
    background-image: url(@src/lbx.png);
    background-size: cover;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.6;
    z-index: 1;
    animation: map2Rotate 10s linear infinite;
}
.map-bg3 {
    width: 566px;
    height: 566px;
    position: absolute;
    background-image: url(@src/jt.png);
    background-size: cover;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: map3Rotate 15s linear infinite;
}

@keyframes map2Rotate {
    from {
        transform: translate(-50%, -50%) rotateZ(0);
    }
    to {
        transform: translate(-50%, -50%) rotateZ(360deg);
    }
}
@keyframes map3Rotate {
    from {
        transform: translate(-50%, -50%) rotateZ(0);
    }
    to {
        transform: translate(-50%, -50%) rotateZ(-360deg);
    }
}
</style>